<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
			    xmlns:ui="http://java.sun.com/jsf/facelets"
			    xmlns:h="http://java.sun.com/jsf/html"
			    xmlns:f="http://java.sun.com/jsf/core"
			    xmlns:eventos="http://java.sun.com/jsf/composite/components/eventos"    			    
			    template="./template/template_login.xhtml">
    
    <ui:define name="title">
        Reservaciones
    </ui:define>
    
    <ui:define name="content">			
		<h:outputScript library="js" name="calendar/PopupWindow.js" target="head" />
   		<h:outputScript library="js" name="calendar/CalendarPopup.js" target="head" />
   		<h:outputScript library="js" name="calendar/AnchorPosition.js" target="head" />    	
		<h:outputScript library="js" name="calendar/date.js" target="body" />
		<h:outputStylesheet library="css" name="calendar.css" />			
		<script>
			var calFechaNacimiento = new CalendarPopup("fechadiv");
	    	calFechaNacimiento.showNavigationDropdowns();
	   		calFechaNacimiento.setCssPrefix("TEST");
	    	calFechaNacimiento.setYearSelectStartOffset(80);
	    	
			function openCalendar(dateField){
				calFechaNacimiento.select(dateField,'img_date','dd/MM/yyyy'); 
				return false;
	   		}
			
			function detalleReservacion(resId) {								
				document.getElementById("eventosForm:hiddenId").value = resId;
				document.getElementById('eventosForm:detalleId').click(); 				
			}	
			
			function nuevaReservacion(dia, mes, anio){
				document.getElementById("eventosForm:hiddenDayId").value = dia;
				document.getElementById("eventosForm:hiddenMonthId").value = mes;
				document.getElementById("eventosForm:hiddenYearId").value = anio;
				document.getElementById('eventosForm:addButtonId').click();
			}
			
		</script>
		
		<h:form id="eventosForm">	
			<DIV ID="fechadiv" STYLE="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></DIV>			
			<f:event listener="#{eventsBean.fillCalendar}" type="preRenderView" />
			
			<table width="80%" align="center" cellpadding="2" cellspacing="1" border="0" bgcolor="#CCCCC0">
				<tr class="titulocolumna">
				   	<td align="center"> Administracion - Terraza Celeste</td>				      		
				</tr>
				
				<tr class="columnadatoPar">
					<td valign="top" class="columnadatoPar">
						<br />
						<br />
						<h:panelGroup>					
							<h:selectOneMenu id="mesId" value="#{eventsBean.month}" styleClass="campo_texto" >						
								<f:ajax render="@none" execute="@this" />						
		                        <f:selectItem itemValue="1" itemLabel="Enero" />
		                        <f:selectItem itemValue="2" itemLabel="Febrero" />
		                        <f:selectItem itemValue="3" itemLabel="Marzo" />
		                        <f:selectItem itemValue="4" itemLabel="Abril" />
		                        <f:selectItem itemValue="5" itemLabel="Mayo" />
		                        <f:selectItem itemValue="6" itemLabel="Junio" />
		                        <f:selectItem itemValue="7" itemLabel="Julio" />
		                        <f:selectItem itemValue="8" itemLabel="Agosto" />
		                        <f:selectItem itemValue="9" itemLabel="Septiembre" />
		                        <f:selectItem itemValue="10" itemLabel="Octubre" />
		                        <f:selectItem itemValue="11" itemLabel="Noviembre" />
		                        <f:selectItem itemValue="12" itemLabel="Diciembre" />
							</h:selectOneMenu> &#160;
							<h:selectOneMenu id="anioId" value="#{eventsBean.year}"  styleClass="campo_texto" >
								<f:ajax render="@none" execute="@this" />                        
		                        <f:selectItem itemValue="2010" itemLabel="2010" />
		                        <f:selectItem itemValue="2011" itemLabel="2011" />
		                        <f:selectItem itemValue="2012" itemLabel="2012" />
		                        <f:selectItem itemValue="2013" itemLabel="2013" />
		                        <f:selectItem itemValue="2014" itemLabel="2014" />
		                        <f:selectItem itemValue="2015" itemLabel="2015" />
		                        <f:selectItem itemValue="2016" itemLabel="2016" />
		                        <f:selectItem itemValue="2017" itemLabel="2017" />
		                        <f:selectItem itemValue="2018" itemLabel="2018" />
		                        <f:selectItem itemValue="2019" itemLabel="2019" />
		                        <f:selectItem itemValue="2020" itemLabel="2020" />
							</h:selectOneMenu>&#160;
							<h:commandButton styleClass="boton" value="Buscar" action="#{eventsBean.searchDateAction}" />
						</h:panelGroup><br /> <br />
						<h:outputText id="htmlCalendarId" value="#{eventsBean.htmlCalendar}" escape="false" />
						<h:commandButton action="#{eventsBean.viewReservationDetailAction}" id="detalleId" style="display: none" />
						<h:inputHidden value="#{eventsBean.hiddenValue}" id="hiddenId" />
						<h:commandButton action="#{eventsBean.showAddButtonAction}" id="addButtonId" style="display: none" />												
						<h:inputHidden value="#{eventsBean.hiddenDay}" id="hiddenDayId" />
						<h:inputHidden value="#{eventsBean.hiddenMonth}" id="hiddenMonthId" />
						<h:inputHidden value="#{eventsBean.hiddenYear}" id="hiddenYearId" />							
						
						<br />
						<h:panelGroup rendered="#{eventsBean.showAddPanel}" >
							<br />
							<div align="center">
							<h:panelGrid  cellspacing="1" border="0" 
							  bgcolor="#CCCCC0" columns="2" columnClasses="etiqueta,etiqueta_campo"							  
							  headerClass="titulocolumna" footerClass="columnadatoPar">
							 
							 <f:facet name="header">
								<h:outputText value="Agregar Reservacion" />  
					 		 </f:facet>	
							  
								Dia:
								<h:panelGroup>
									<h:inputText styleClass="campo_texto" value="#{eventsBean.date}" onfocus="this.select();" readonly="true" />									
								</h:panelGroup>
								
								Condomino 	
								<h:selectOneMenu id="condominoId" value="#{eventsBean.condId}"  styleClass="campo_texto" >
			 						<f:selectItems value="#{eventsBean.condominiumsList}" />
								</h:selectOneMenu>
								
								Descripcion
								<h:inputTextarea styleClass="campo_texto" value="#{eventsBean.description}" onfocus="this.select();" cols="50" rows="10" />
								 
								<f:facet name="footer">
									<h:commandButton styleClass="boton" value="Reservar" action="#{eventsBean.addReservationAction}" />&#160;&#160;
									<h:commandButton styleClass="boton" value="Cancelar" action="#{eventsBean.cancelAction}" />
								</f:facet>
							</h:panelGrid>
								<br />
								<br />
							</div>
						</h:panelGroup>
						
						<h:panelGroup rendered="#{eventsBean.showEditPanel}" >
							<br />
							<div align="center">
							<h:panelGrid  cellspacing="1" border="0" 
							  bgcolor="#CCCCC0" columns="2" columnClasses="etiqueta,etiqueta_campo"							  
							  headerClass="titulocolumna" footerClass="columnadatoPar">
							 
							 <f:facet name="header">
								<h:outputText value="Detalle Reservacion" />  
					 		 </f:facet>	
							  
								Dia:
								<h:panelGroup>
									<h:inputText id="date" styleClass="campo_texto" value="#{eventsBean.date}" onfocus="this.select();" />
									<a href="javascript:var obj_dummy = openCalendar(document.getElementById('eventosForm:date'));" class="pointerhand" NAME="img_date" ID="img_date">
										<img id="fechatrigger" src="resources/images/calendar.gif" border="0" />
									</a>									
								</h:panelGroup>
								
								Condomino 	
								<h:selectOneMenu id="condominoEditId" value="#{eventsBean.editEventsView.condId}"  styleClass="campo_texto" >
			 						<f:selectItems value="#{eventsBean.condominiumsList}" />
								</h:selectOneMenu>
								
								Descripcion
								<h:inputTextarea styleClass="campo_texto" value="#{eventsBean.editEventsView.description}" onfocus="this.select();" cols="50" rows="10" />
								 
								<f:facet name="footer">
									<h:commandButton styleClass="boton" value="Modificar" action="#{eventsBean.editReservationAction}" />&#160;&#160;
									<h:commandButton styleClass="boton" value="Eliminar" action="#{eventsBean.deleteReservationAction}" />&#160;&#160;
									<h:commandButton styleClass="boton" value="Cancelar" action="#{eventsBean.cancelAction}" />
								</f:facet>
							</h:panelGrid>
								<br />
								<br />
							</div>
						</h:panelGroup>
					</td>					
				</tr>				
		    				
			</table>
			<br />
			<br />
			<br />					
		</h:form>			
	</ui:define>    
</ui:composition>